<template>
    <div class="verify-list">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="姓名">
                <el-input v-model="formInline.userName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="会员ID">
                <el-input v-model="formInline.ecardId" placeholder="会员ID"></el-input>
            </el-form-item>
            <el-form-item label="验证时间" class="verify-time">
                <el-row>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.startEntryTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="00:00:00">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1" class="time-span">~</el-col>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="formInline.endEntryTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="23:59:59">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border highlight-current-row size="small">
            <el-table-column label='会员ID' width="160" align="center" prop="ecardId"></el-table-column>
            <el-table-column label="姓名" width="100" align="center" prop="userName"></el-table-column>
            <el-table-column label="身份证号" width="160" align="center" prop="idCard"></el-table-column>
            <el-table-column label="有效期" width="180" align="center">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.formatStartDate}}~{{scope.row.formatEndDate}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="景区名称" min-width="120" align="center" prop="scenicName"></el-table-column>
            <el-table-column label="价格（元）" width="110" align="center" prop="price"></el-table-column>
            <el-table-column label="验证时间" width="160" align="center" prop="formatEntryTime"></el-table-column>
            <el-table-column label="积分" width="110" align="center" prop="integral"></el-table-column>
            <el-table-column label="结算金额（元）" width="110" align="center" prop="settlePrice"></el-table-column>
            <!--<el-table-column label="操作" width="160" align="center">-->
                <!--<template slot-scope="scope">-->
                    <!--<div class="style-a">-->
                        <!--<a href="javascript:void(0);">置为无效</a>-->
                    <!--</div>-->
                <!--</template>-->
            <!--</el-table-column>-->
        </el-table>
        <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="20"
                :current-page="currentPage"
                @current-change="handleChangePage">
        </el-pagination>
    </div>
</template>
<script>
	import { getVerifyList } from '@/api/verifyList'
	import { formatDate } from '@/utils/utils'
	export default {
		data() {
			return {
				list: [],
				listLoading: false,
				formInline: {
					ecardId: '',
					userName: '',
					startEntryTime: '',
					endEntryTime: ''
				},
				total: null,
				currentPage: 1,
				pageSize: 20,
				// 订单详情弹框
				detailDialogVisible: false
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
			fetchData() {
				this.listLoading = true
				let formInline = this.formInline
				let params = {
					ecardId: formInline.ecardId,
					userName: formInline.userName,
					startEntryTime: formatDate(formInline.startEntryTime, true),
					endEntryTime: formatDate(formInline.endEntryTime, true),
					pageNumber: this.currentPage,
					pageSize: this.pageSize
				}
				getVerifyList(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.list = data.body.list
						this.total = data.body.total
					}
				}).catch(() => {
					this.listLoading = false
                })
			},
			onSearch() {
				this.fetchData()
			},
			handleChangePage(val) {
				this.currentPage = val
				this.fetchData()
			}
		}
	}
</script>
<style lang="scss">
    .verify-list{
        .el-dialog__body{
            padding-top: 10px;
        }
        .el-table__header-wrapper{
            overflow: visible;
        }
        .verify-time{
            .el-form-item__content{
                width: 480px;
            }
            .time-width{
                width: 220px;
            }
            .time-span{
                text-align: center;
            }
        }
        .el-table{
            overflow: visible !important;
        }
        .el-table .el-table__body-wrapper {
            overflow: visible;
        }
        .el-table .cell {
            padding: 0 4px;
            overflow: visible;
        }
    }
</style>
